import { useEffect} from 'react';
import * as echarts from 'echarts';

export default function TableCharts (props){
    let tableCharts
    const option = {
        // title: {text: '支出构成'},
        // backgroundColor: '#020F37',
        color: ['#6552D5', '#70D9DA', '#54A8BF', '#3180C0'],
        grid: {
            bottom: 150,
            left: 100,
            right: '10%'
        },
        legend: {
            show: false,
            orient: 'vertical',
            top: "10%",
            left: "10%",
            textStyle: {
                color: '#f2f2f2',
                fontSize: 10,
            },
            icon: 'roundRect',
            data: props.dataL,
        },
        series: [
            {
                radius: ['32%', '50%'],
                center: ['50%', '35%'],
                type: 'pie',
                // silent: true,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
                label: {
                    fontSize: 16,
                    show: true,
                    formatter: "{b} {c}",
                    color: "#222",
                    position: 'outside',
                },
                emphasis: {
                    disabled: true
                },
                labelLine: {
                    show: true,
                    length: 20,
                    length2: 25
                },
                name: "",
                data: props.dataL,
            },
            {
                radius: ['30%', '31%'],
                center: ['50%', '35%'],
                silent: true,
                type: 'pie',
                label: { show: false },
                labelLine: { show: false },
                animation: false,
                tooltip: {
                    show: false
                },
                data: [{
                    value: 1,
                    itemStyle: {
                        color: "rgba(250,250,250,0.3)",
                    },
                }],
            }, {
                name: '外边框',
                type: 'pie',
                clockwise: false, //顺时加载
                // silent: true,
                center: ['50%', '35%'],
                radius: ['53%', '53%'],
                label: { show: false },
                data: [{
                    value: 9,
                    name: '',
                    itemStyle: {
                        borderWidth: 2,
                        borderColor: '#0b5263'
                    }
                }]
            }
        ]
    };
    function initChart() {
        tableCharts.setOption(option)
    }

    useEffect(() => {
        tableCharts = echarts.init(document.getElementById("table"))
        initChart()
    }, [props.dataL])
    return <div id='table' style={{ height: '70vw', width: '100%' }}></div>
}